<template>
	<view class="page_box seckill-list-wrap">
		<nav-bar title="限时秒杀" isBack></nav-bar>
		
       <!-- tab栏 -->
       		<view class="tab-box u-flex">
       			<view class="tab-item u-flex-col u-row-center u-col-center" @tap="tabChange(tab.timetext)" v-for="tab in tabList" :key="tab.timetext ">
       				<text class="tab-title" :class="{ 'tab-active': tabCurrent === tab.timetext  }">{{ tab.timetext }}</text>
					<text class="svd" v-if="tab.seckilling==1">抢购中</text><text class="svd" v-else>即将开始</text>
       				<text v-show="tabCurrent === tab.timetext " class="tab-line"></text>
       			</view>
       		</view>
       
       		<!-- 商品列表 -->
       		<view class="content_box">
       			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
       				<view class="goods-item u-m-b-16" v-for="item in goodsList" :key="item.id">
       					<view class="big-goods  u-flex u-p-20 u-col-top ">
       						<u-image ref="uImage" :width="220" :height="220" border-radius="10" :src="item.main_imgurl" mode="aspectFill"></u-image>
       						<view class=" card-right u-m-l-20 u-flex-col u-row-between">
       							<view class="">
       								<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
       									<u-tag class="title-tag u-m-r-10" text="秒杀" size="mini" bg-color="#FF2621" border-color="#FF2621" color="#fff" />
       									{{ item.product_title }}
       								</view>
       								<view v-show="item.subtitle" class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
       							</view>
       
       							<view class="u-flex u-m-y-20">
       								<u-line-progress
       									style="width:210rpx;"
       									height="18"
       									:show-percent="false"
       									:percent="item.volume"
       									inactive-color=" #e7e7e7"
       									active-color="#ffbbbb "
       								></u-line-progress>
       
       								<view class="progress-text">已售出{{ item.volume }}件</view>
       							</view>
       
       							<view class=" u-flex u-row-between u-col-center">
       								<view class="u-flex u-col-bottom font-OPPOSANS">
       									<view class="price u-m-r-10">{{ item.price }}</view>
       									<view class="origin-price">{{ item.primary_price }}</view>
       								</view>
       								<button class="u-reset-button buy-btn" @click="navTo(`/pages_mall/pages/mall/goods_details/goods_details?id=${item.id}`)">去抢购</button>
       							</view>
       						</view>
       					</view>
       				</view>
					<view style="text-align: center;color: #999;line-height: 80rpx;" v-if="goodsList!=''">到底了~</view>
       				<!-- 空白 -->
                   <view class="nolist" v-if="goodsList==''">
                   	   <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
                    	<text>暂无秒杀商品，敬请期待~</text>
                   </view>
       			</scroll-view>
       		</view>
		

	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import service_mall from '@/service/mall.js'
	import URL from '@/config/url.js'

	export default {
		components: {
			navBar
		},

		data() {
			return {
				userId: "",
				tabList: [],
				tabCurrent:'',
				goodsPage:1,
				goodsList: [],
			}
		},
		onLoad(params) {
			this.$utils.getUrl()
			this.getGoodsclass()
			this.userId = uni.getStorageSync('userId')
			let token = uni.getStorageSync('token')
			if(params.share_uid){
				let shareuId= params.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if(token && shareuId){
					service_mall.getPromoter({share_uid:shareuId})
						.then(res => {
					})
				}
			}
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') {}
			return {
				title: '限时秒杀',
				path: '/pages_now/pages/now/seckill/index?share_uid=' + this.userId,
				success: function(res) {}
			}
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: '限时秒杀',
				path: '/pages_now/pages/now/seckill/index?share_uid=' + this.userId,
				success: function(res) {
					
				}
			};
		},
		methods: {
			tabChange(hour){
				this.tabCurrent = hour
				this.goodsPage=1
				this.goodsList=[]
				console.log(22)
				this.getGoods()
			},
			// 加载更多
			loadMore(){
				console.log(111)
				this.goodsPage++
				this.getGoods()
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取商品秒杀时间
			getGoodsclass() {
				console.log(1112)
				let params = {
					page: 1,
				}
				service_mall.seckill(params)
				.then(res => {
					if (res.code == 1) {
						this.tabList = res.data.hours
						this.tabCurrent = res.data.hours[0].timetext
						this.getGoods()
					}
				})
			},
			// 获取商品列表
			getGoods() {
					let params = {
						page: this.goodsPage,
						hour:this.tabCurrent.slice(0,2),
					}
					service_mall.seckill(params)
						.then(res => {
							if (res.code == 1) {
								let data = res.data.goods
								for(var i=0;i<data.length;i++){
									this.goodsList.push(data[i]); // 加载的数据追加在上一页后面
								}
							}
						})
						.catch(err => {
							
						})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.seckill-list-wrap {
	background: url('https://cos.ryz1620.com/liankun/static/sekill_list_head_bg.png') no-repeat;
	background-size: 100% auto;
	background-position: center 128rpx;
}
// tab
.tab-box {
	.tab-item {
		flex: 1;
		height: 140rpx;
		color: rgba(#fff, 0.4);
		font-size: 32rpx;
		font-weight: 600;
		.tab-line {
			width: 50rpx;
			height: 8rpx;
			background: #fff;
			border-radius: 4rpx;
		}
	}

	.tab-active {
		color: rgba(#fff, 1);
	}
}
.svd{
	font-size: 24rpx;
	font-weight: normal;
	margin-bottom: 10rpx;
}
.content_box{
	height: calc(100vh - 208rpx);
}
.scroll-box {
	background: linear-gradient(#fff, #f5f5f5);
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
	margin: 0 auto;
}
// 列表
.goods-item {
	padding: 0 20rpx;
	// 大商品卡片
	.big-goods {
		height: 260rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;
		.card-right {
			width: 430rpx;
			height: 220rpx;
		}
		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
			.title-tag {
				transform: scale(0.9);
			}
		}
		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}
		.buy-btn {
			width: 120rpx;
			margin: 0;
			line-height: 50rpx;
			background: linear-gradient(90deg, #d01325, #ed3c30);
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.progress-text {
			color: #c4c4c4;
			font-size: 20rpx;
			margin-left: 25rpx;
		}
		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;
			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;
			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.buy-btn {
		width: 120rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #d01325, #ed3c30);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.btn-end,
	.btn-nostart {
		background: rgba(238, 238, 238, 1);
		color: #999999;
	}
	.btn-ing {
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		color: rgba(255, 255, 255, 1);
	}
}
.seckill_tab{
	position: relative;
	z-index: 4;
	.seckill_tab_x{
		overflow-x: auto;
	}
}
	.u-ellipsis-1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.nolist {
		margin-top: 200rpx;
		line-height: 80rpx;
		text-align: center;
		color: #939393;
	}
	
	.nolist image {
		display: block;
		width: 288rpx;
		height: 232rpx;
		margin: auto;
	}
</style>
